<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconlogo.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="list_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>列表组件</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
					<div class="scroller"> 
						<ul class="listitem">
							<li class="sliver">单行列表</li>
					        <li>
					            <div class="text">Agile Lite轻量级HTML5框架介绍</div>
					        </li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text">ExMobi+Agile开发注意事项</div>
					        </li>
					        <li>
					        	<i class="icon iconfont iconline-fav"></i>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text">ExMobi全面支持HTML5和Native融合</div>
					        </li>
					        <li>
					        	<i class="icon iconfont iconline-fav"></i>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text nowrap">Agile Lite助力企业多端开发</div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					    	<li class="sliver">双行列表</li>
					        <li>
					            <div class="text">
					            	Agile Lite轻量级HTML5框架介绍
					            	<small>Agile Lite是一个基于HTML5+CSS3+JS的移动前端框架</small>
					            </div>
					        </li>
					        <li>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text">
					            	ExMobi+Agile开发注意事项
					            	<small>Agile支持单页和多页模式开发，在ExMobi中建议使用多页模式，让代码更容易维护</small>
					            </div>
					        </li>
					        <li>
					        	<i class="icon iconfont iconline-fav"></i>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text">
					            	ExMobi全面支持HTML5和Native融合
					            	<small>ExMobi三大引擎支持uixml原生组件、HTML5以及Native原生插件，让HTML5和Native更易融合</small>
					            </div>
					        </li>
					        <li>
					        	<i class="icon iconfont iconline-fav"></i>
					            <i class="ricon iconfont iconline-arrow-right"></i>
					            <div class="text">
					            	Agile Lite助力企业多端开发
					            	<small class="nowrap">Agile Lite可以轻松满足APP、浏览器、微信等多端展示需求</small>
					            </div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					    	<li class="sliver">按钮列表</li>
					        <li class="row-large">
					            <button class="ricon">按钮</button>
					        	<div class="text" style="padding-right:40px;">
					              	按钮列表按钮列表按钮列表按钮列表
					            </div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					    	<li class="sliver">新闻列表</li>
					        <li>
					            <img src="assets/app/img/list/list_img.jpg" style="width:64px;" class="img"/>
					        	<div class="text">
					              	 标题标题标题标题
					                <small>副标题副标题副标题副标题副标题副标题副标题副标题</small>
					            </div>
					            <small class="rcaption">
					            	1891跟帖
					            </small>
					        </li>
					        <li>
					            <img src="assets/app/img/list/list_img.jpg" style="width:64px;" class="rimg"/>
					        	<div class="text">
					              	 标题标题标题标题
					                <small class="nowrap ellipsis">副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题</small>
					            </div>
					        </li>
					    </ul>
					    
					    <ul class="listitem">
					    	<li class="sliver">功能列表</li>
					        <li>
					            <div class="img square">
					            	<i class="iconfont iconlogo-logo-starrysky"></i>
					            	<div class="tip">11</div>
					            </div>
					        	<div class="text">
					              	标题标题标题标题
					                <small class="nowrap">副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题</small>
					            </div>
					        </li>
					        <li>
					            <div class="img square">
					            	<i class="iconfont iconlogo-logo-starrysky"></i>
					            </div>
					        	<div class="text" style="height:38px;position:relative;">
					              	 <span class="middle">标题标题标题标题</span>
					            </div>
					        </li>
					    </ul>
					</div>  
				</article>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		
	</body>
</html>